<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import { loginPhone } from '@/api/login';
import { useAppStore, useUserStore } from '@/store/modules';
import { setToken } from '@/utils/auth';
import config from '@/config/config';

import { ref, computed } from 'vue';


const userStore = useUserStore();
const appStore = useAppStore();
const siteInfo = computed(() => appStore.siteInfo)

const queryParams = ref({
  username: '',
  password: ''
})


// 控制密码输入框是否显示为明文（true 为密文，false 为明文）
const isEyes = ref(true);


/**
 * 处理用户名输入事件，更新 queryParams 中的 username 字段
 * @param {Object} event - 输入事件对象
 */
function handleUsernameInput(event) {
  queryParams.value.username = event.detail;
}

/**
 * 处理密码输入事件，更新 queryParams 中的 password 字段
 * @param {Object} event - 输入事件对象
 */
function handlePasswordInput(event) {
  queryParams.value.password = event.detail;
}



// 登录按钮
async function loginFn() {
  if (queryParams.value.username === '' || queryParams.value.password === '') {
    return Toast.fail('请填写用户名和密码')
  }
  const inviteCode = uni.getStorageSync('inviteCode')
  if (inviteCode) {
    queryParams.value.inviteCode = inviteCode
  }
  const res = await loginPhone(queryParams.value)
  setToken(res.data.token)
  await userStore.getUserInfo()

  Toast.success({
    message: '登录成功',
    onClose() {
      uni.switchTab({ url: config.page.index })
    }
  })
}


/**
 * 判断当前设备是否为宽屏设备。
 * 
 * 该函数通过获取设备的屏幕宽度和高度，计算宽高比，
 * 并根据设定的阈值（宽度大于等于768像素或宽高比大于1.6）判断设备是否为宽屏。
 * 
 * 返回值：
 *   - true：设备为宽屏设备
 *   - false：设备为非宽屏设备
 */
function isWideScreenDevice() {
  const { screenWidth, screenHeight } = uni.getSystemInfoSync();
  const aspectRatio = screenWidth / screenHeight;
  return screenWidth >= 768 || aspectRatio > 1.6; // 宽屏阈值
}

const toWxlogin = () => {
  uni.redirectTo({ url: '/pages/wxlogin/index' })
}
</script>

<template>
  <div class='login'>
    <NavBar></NavBar>
    <div class="container">
      <div class="o_title">欢迎使用{{ siteInfo?.siteName }}</div>
      <div class="o_label">立即登录，享受优质服务</div>

      <van-field type="number" v-model="queryParams.username" label="手机号" placeholder="请填写手机号"
        @input="handleUsernameInput" />
      <van-field v-model="queryParams.password" :password="isEyes" label="密码" placeholder="请填写密码"
        :right-icon="[isEyes ? 'closed-eye' : 'eye-o']" @click-icon="isEyes = !isEyes;" @input="handlePasswordInput" />

      <div class="login_btn" @click="loginFn">登录</div>

      <div class="footer" :class="{ mTop: isWideScreenDevice() }">
        <div class="order">
          <span class="line"></span>
          <span class="txt">第三方登录</span>
          <span class="line"></span>
        </div>
        <img src="../../assets/imgs/wx.png" alt="" @click="toWxlogin">
      </div>
    </div>
  </div>
  <van-toast id="van-toast" />
</template>

<style lang='scss' scoped>
::v-deep {
  .van-field__label {
    color: var(--a-two-text-color);
  }

  .van-cell {
    height: 115rpx;
    background: var(--a-main-box-bg-color);
    border-radius: 50rpx;
    margin: 50rpx 0;

    input {
      color: var(--a-one-text-color)
    }

    &::after {
      border-bottom: none !important;
    }

    .van-cell__title {
      margin: auto 0;
    }

    .van-cell__value {
      margin: auto 0;
    }
  }

  .van-nav-bar {
    background-color: transparent !important;
  }

  .van-checkbox__label {
    color: var(--a-two-text-color) !important;
  }
}

.login {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .container {
    flex: 1;
    padding: 0 40rpx;

    .o_title {
      font-size: 44rpx;
      font-weight: bold;
      letter-spacing: 3px;
      margin-top: 120rpx;
      color: var(--a-one-text-color);
    }

    .o_label {
      color: var(--a-two-text-color);
      margin-top: 10rpx;
      font-size: 32rpx;
    }

    .login_btn {
      height: 100rpx;
      border-radius: 50rpx;
      color: var(--a-one-text-color);
      background-color: var(--a-main-color);
      font-size: 32rpx;
      margin-top: 100rpx;
      font-size: 32rpx;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer {
      font-size: 24rpx;
      color: #787E7E;
      position: absolute;
      bottom: 25rpx;
      left: 0;
      right: 0;
      text-align: center;

      &.mTop {
        position: relative;
        margin-top: 100rpx;
      }

      image {
        width: 84rpx;
        height: 84rpx;
        margin-bottom: 50rpx;
      }

      .order {
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        margin-bottom: 20rpx;

        .line {
          height: 1rpx;
          display: inline-block;
          width: 200rpx;
          background-color: #E0E0E0;
        }

        .txt {
          display: inline-block;
          color: #686868;
          vertical-align: middle;
          width: 180rpx;
        }
      }
    }
  }
}
</style>